<template>
  <view class="container">
    <!-- 购物车列表 -->

    <view class="cart-items">
      <view class="cart-item" v-for="(item, index) in cartItems" :key="index">
        <view class="checkbox-wrapper" @click="toggleSelect(index)">
          <uni-icons :type="item.selected ? 'checkbox-filled' : 'circle'" size="22" :color="item.selected ? '#ff6b6b' : '#ddd'"></uni-icons>
        </view>
        <view class="item-main" @click="goToProduct(item.id)">
          <image class="item-image" :src="item.image" mode="aspectFill"></image>
          <view class="item-info">
            <text class="item-title">{{ item.title }}</text>
            <text class="item-specs" v-if="item.specs">{{ item.specs }}</text>
            <view class="item-bottom">
              <text class="item-price">¥{{ item.price }}</text>
              <view class="quantity-control">
                <view class="quantity-btn minus" :class="{ disabled: item.quantity <= 1 }" @click.stop="decreaseQuantity(index)">
                  <uni-icons type="minus" size="12" :color="item.quantity <= 1 ? '#ccc' : '#666'"></uni-icons>
                </view>
                <text class="quantity-val">{{ item.quantity }}</text>
                <view class="quantity-btn plus" @click.stop="increaseQuantity(index)">
                  <uni-icons type="plus" size="12" color="#666"></uni-icons>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="delete-btn" v-if="isEdit" @click="removeItem(index)">
          <uni-icons type="trash" size="18" color="#ff6b6b"></uni-icons>
        </view>
      </view>
    </view>

    <!-- 猜你喜欢 -->
    <view class="recommend-section">
      <view class="section-header">
        <view class="title-group">
          <text class="section-title">猜你喜欢</text>
          <text class="section-subtitle">更多好物推荐</text>
        </view>
      </view>
      <view class="recommend-grid">
        <view class="recommend-item" v-for="(item, index) in recommendProducts" :key="index" @click="goToProduct(item.id)">
          <image :src="item.image" mode="aspectFill" class="recommend-image"></image>
          <view class="recommend-info">
            <text class="recommend-title">{{ item.title }}</text>
            <text class="recommend-price">¥{{ item.price }}</text>
          </view>
        </view>
      </view>
      
      <!-- 加载更多状态提示 -->
      <view class="loading-more" v-if="isLoading">
        <uni-icons type="spinner-cycle" size="16" color="#999" class="loading-icon"></uni-icons>
        <text>加载中...</text>
      </view>
      
      <!-- 无更多数据提示 -->
      <view class="no-more" v-if="!hasMoreRecommend && recommendProducts.length > 0">
        <text>— 没有更多商品了 —</text>
      </view>
    </view>

    <!-- 底部结算栏 -->
    <view class="settlement-bar" v-if="cartItems.length > 0">
      <view class="select-all" @click="toggleSelectAll">
        <uni-icons :type="isAllSelected ? 'checkbox-filled' : 'circle'" size="22" :color="isAllSelected ? '#ff6b6b' : '#ddd'"></uni-icons>
        <text class="select-all-text">全选</text>
      </view>
      <view v-if="!isEdit" class="price-settle">
        <view class="total-info">
          <text class="total-text">合计：</text>
          <text class="total-price">¥{{ totalPrice }}</text>
        </view>
        <view class="checkout-btn" @click="checkout">
          <text>结算({{ selectedCount }})</text>
        </view>
      </view>
      <view v-else class="delete-settle">
        <view class="remove-btn" @click="removeSelected">
          <text>删除所选</text>
        </view>
      </view>
    </view>

    <!-- 编辑按钮 -->
    <view class="float-edit-btn" @click="handleEdit">
      {{ isEdit ? "完成" : "编辑" }}
    </view>
  </view>
</template>

<script>
  import CustomTabbar from "@/components/custom-tabbar.vue";

  export default {
    components: {
      CustomTabbar,
    },
    data() {
      return {
        isEdit: false,
        cartItems: [
          {
            id: 1,
            title: "简约设计感宽松上衣",
            specs: "颜色: 灰色 尺码: M",
            price: 399,
            quantity: 1,
            image:
              "https://cbu01.alicdn.com/img/ibank/O1CN01vtI2nO1dl0C9agSDT_!!2215839253775-0-cib.jpg_460x460q100.jpg",
            selected: true,
          },
          {
            id: 3,
            title: "复古玛丽珍鞋",
            specs: "颜色: 黑色 尺码: 38",
            price: 720,
            quantity: 1,
            image:
              "https://cbu01.alicdn.com/img/ibank/O1CN01FIM7A91VCdLsN2GlS_!!2207477542617-0-cib.jpg_460x460q100.jpg",
            selected: true,
          },
        ],
        recommendProducts: [
          {
            id: 5,
            image: "https://cbu01.alicdn.com/img/ibank/O1CN01CaJ5oa2J48zJU4Yst_!!2219312519367-0-cib.jpg_460x460q100.jpg",
            title: "夏季轻薄透气T恤",
            price: 199,
          },
          {
            id: 6,
            image: "https://cbu01.alicdn.com/img/ibank/O1CN01iL5UWw2BaeAWulSm0_!!254418355.jpg_460x460q100.jpg",
            title: "韩版宽松运动裤",
            price: 289,
          },
          {
            id: 7,
            image: "https://cbu01.alicdn.com/img/ibank/O1CN01KpcoWr22GBw0MYlDw_!!2013457092-0-cib.jpg_460x460q100.jpg",
            title: "复古小方包单肩包",
            price: 369,
          },
          {
            id: 8,
            image: "https://cbu01.alicdn.com/img/ibank/O1CN01QjWzKr1OCRqdURfCK_!!2208562791669.jpg_460x460q100.jpg",
            title: "百搭休闲帆布鞋",
            price: 259,
          },
        ],
        // 加载更多相关状态
        isLoading: false,
        hasMoreRecommend: true,
        allRecommendProducts: []
      };
    },
    created() {
      // 初始化所有推荐商品数据
      this.allRecommendProducts = [...this.recommendProducts];
      
      // 额外的推荐商品数据用于加载更多
      const moreProducts = [
        {
          id: 9,
          image: "https://cbu01.alicdn.com/img/ibank/O1CN01h3jgtK1bwKhyTtn9u_!!2211361603529-0-cib.jpg_460x460q100.jpg",
          title: "时尚连帽卫衣",
          price: 288
        },
        {
          id: 10,
          image: "https://cbu01.alicdn.com/img/ibank/O1CN0141ARAc2Leu0XnqwKo_!!2218427659718-0-cib.jpg_460x460q100.jpg",
          title: "加绒宽松长裤",
          price: 259
        },
        {
          id: 11,
          image: "https://cbu01.alicdn.com/img/ibank/O1CN01KRTDxx20aE1VNNXcJ_!!2216029046865-0-cib.jpg_460x460q100.jpg",
          title: "简约百搭帆布包",
          price: 159
        },
        {
          id: 12,
          image: "https://cbu01.alicdn.com/img/ibank/O1CN01KbXwOU1mkNqhqHUGS_!!2324784992-0-cib.jpg_460x460q100.jpgg",
          title: "流行趋势短靴",
          price: 399
        },
        {
          id: 13,
          image: "https://cbu01.alicdn.com/img/ibank/O1CN01IzE6Hp28LaI3YwFy9_!!3101777916-0-cib.jpg_460x460q100.jpg",
          title: "高腰直筒牛仔裤",
          price: 229
        },
        {
          id: 14,
          image: "https://cbu01.alicdn.com/img/ibank/O1CN014k4bMn1CcIxZtxr4M_!!2212017950101-0-cib.jpg_460x460q100.jpg",
          title: "薄款针织开衫",
          price: 189
        }
      ];
      
      // 将额外数据添加到所有推荐数据中
      this.allRecommendProducts = [...this.allRecommendProducts, ...moreProducts];
    },
    // 添加页面触底事件处理函数
    onReachBottom() {
      console.log("购物车页面触底，加载更多推荐");
      // 调用加载更多推荐商品的方法
      this.loadMoreRecommend();
    },
    computed: {
      isAllSelected() {
        if (this.cartItems.length === 0) return false;
        return this.cartItems.every((item) => item.selected);
      },
      selectedCount() {
        return this.cartItems.filter((item) => item.selected).length;
      },
      totalPrice() {
        return this.cartItems
          .filter((item) => item.selected)
          .reduce((total, item) => total + item.price * item.quantity, 0)
          .toFixed(2);
      },
    },
    methods: {
      // 加载更多推荐商品
      loadMoreRecommend() {
        // 如果正在加载或没有更多数据，则不处理
        if (this.isLoading || !this.hasMoreRecommend) return;
        
        // 设置加载状态
        this.isLoading = true;
        
        // 模拟加载过程
        setTimeout(() => {
          // 获取当前商品数量
          const currentCount = this.recommendProducts.length;
          // 当所有的商品已加载完
          if (currentCount >= this.allRecommendProducts.length) {
            this.hasMoreRecommend = false;
            this.isLoading = false;
            return;
          }
          
          // 每次加载4个商品
          const nextItems = this.allRecommendProducts.slice(currentCount, currentCount + 4);
          // 添加到当前显示的商品列表
          this.recommendProducts = [...this.recommendProducts, ...nextItems];
          // 取消加载状态
          this.isLoading = false;
        }, 800);
      },
      handleEdit() {
        this.isEdit = !this.isEdit;
      },
      toggleSelect(index) {
        this.cartItems[index].selected = !this.cartItems[index].selected;
      },
      toggleSelectAll() {
        const newValue = !this.isAllSelected;
        this.cartItems.forEach((item) => {
          item.selected = newValue;
        });
      },
      increaseQuantity(index) {
        if (this.cartItems[index].quantity < 99) {
          this.cartItems[index].quantity++;
        }
      },
      decreaseQuantity(index) {
        if (this.cartItems[index].quantity > 1) {
          this.cartItems[index].quantity--;
        }
      },
      removeItem(index) {
        this.cartItems.splice(index, 1);
      },
      removeSelected() {
        this.cartItems = this.cartItems.filter((item) => !item.selected);
        this.isEdit = false;
      },
      checkout() {
        if (this.selectedCount === 0) {
          uni.showToast({
            title: "请选择商品",
            icon: "none",
          });
          return;
        }
        uni.navigateTo({
          url: "/pages/checkout/checkout",
        });
      },
      goToProduct(productId) {
        uni.navigateTo({
          url: `/pages/product_detail/product_detail?id=${productId}`,
        });
      },
      goToIndex() {
        uni.switchTab({
          url: "/pages/index/index",
        });
      },
    },
  };
</script>

<style lang="scss">
  .container {
    background-color: #f8f8f8;
    min-height: 100vh;
    padding-bottom: 60px; // 为底部结算栏留出空间
  }

  // 空购物车
  .empty-cart {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 80px;
  }

  .empty-illustration {
    width: 120px;
    height: 120px;
    margin-bottom: 15px;
  }

  .empty-tip {
    font-size: 15px;
    color: #999;
    margin-bottom: 25px;
  }

  .go-shopping-btn {
    background: linear-gradient(135deg, #ff6b6b 0%, #ff9f9f 100%);
    color: white;
    padding: 10px 30px;
    border-radius: 25px;
    font-size: 14px;
    box-shadow: 0 4px 10px rgba(255, 107, 107, 0.3);
  }

  // 购物车列表
  .cart-scroll {
    height: calc(100vh - 50px - 60px); // 调整高度：视口高度 - 导航栏高度 - 结算栏高度
    margin-bottom: 0; // 移除底部多余的间距
  }

  .cart-items {
    padding: 10px 15px;
  }

  // 添加浮动编辑按钮
  .float-edit-btn {
    position: fixed;
    right: 15px;
    top: 10px; // 位置在原生导航栏下方
    background-color: rgba(255, 107, 107, 0.1);
    color: #ff6b6b;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 14px;
    z-index: 99;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .cart-item {
    display: flex;
    align-items: center;
    padding: 15px;
    margin-bottom: 10px;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  }

  .checkbox-wrapper {
    padding: 10px;
    margin-right: 5px;
  }

  .item-main {
    display: flex;
    flex: 1;
  }

  .item-image {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    margin-right: 12px;
  }

  .item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .item-title {
    font-size: 14px;
    color: #333;
    margin-bottom: 6px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .item-specs {
    font-size: 12px;
    color: #999;
    margin-bottom: 8px;
  }

  .item-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .item-price {
    font-size: 16px;
    font-weight: 600;
    color: #ff6b6b;
  }

  .quantity-control {
    display: flex;
    align-items: center;
    height: 28px;
    border: 1px solid #eee;
    border-radius: 14px;
    overflow: hidden;
  }

  .quantity-btn {
    width: 28px;
    height: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f8f8f8;

    &.disabled {
      background-color: #f0f0f0;
    }

    &.minus {
      border-right: 1px solid #eee;
    }

    &.plus {
      border-left: 1px solid #eee;
    }
  }

  .quantity-val {
    padding: 0 10px;
    min-width: 30px;
    text-align: center;
    font-size: 13px;
    color: #333;
  }

  .delete-btn {
    padding: 10px;
    margin-left: 10px;
  }

  // 猜你喜欢
  .recommend-section {
    margin: 10px 15px 15px; // 增加底部间距
    background-color: #fff;
    border-radius: 16px;
    padding: 15px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  }

  .section-header {
    margin-bottom: 15px;
  }

  .title-group {
    display: flex;
    flex-direction: column;
  }

  .section-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 3px;
  }

  .section-subtitle {
    font-size: 11px;
    color: #999;
  }

  .recommend-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .recommend-item {
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  }

  .recommend-image {
    width: 100%;
    height: 140px;
  }

  .recommend-info {
    padding: 10px;
  }

  .recommend-title {
    font-size: 13px;
    color: #333;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 34px;
  }

  .recommend-price {
    font-size: 14px;
    font-weight: bold;
    color: #ff6b6b;
    margin-top: 5px;
    display: block;
  }
  
  // 加载更多状态提示
  .loading-more {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 0 5px;
    color: #999;
    font-size: 13px;
  }

  .loading-icon {
    margin-right: 5px;
    animation: spin 1s linear infinite;
  }

  // 无更多数据提示
  .no-more {
    text-align: center;
    color: #999;
    font-size: 12px;
    padding: 10px 0 0;
  }

  @keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  // 底部结算栏
  .settlement-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    background-color: #fff;
    padding: 0 15px;
    box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.05);
    z-index: 99;
  }

  .select-all {
    display: flex;
    align-items: center;
  }

  .select-all-text {
    margin-left: 8px;
    font-size: 14px;
    color: #333;
  }

  .price-settle {
    display: flex;
    align-items: center;
  }

  .total-info {
    margin-right: 15px;
  }

  .total-text {
    font-size: 14px;
    color: #666;
  }

  .total-price {
    font-size: 18px;
    font-weight: bold;
    color: #ff6b6b;
  }

  .checkout-btn {
    background: linear-gradient(135deg, #ff6b6b 0%, #ff9f9f 100%);
    color: #fff;
    height: 40px;
    padding: 0 20px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    box-shadow: 0 4px 10px rgba(255, 107, 107, 0.3);
  }

  .remove-btn {
    background-color: #ff6b6b;
    color: #fff;
    height: 40px;
    padding: 0 20px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
  }
</style>
